<template>
	<view class="login">
		<image src="../../static/login-bg.png" mode="aspectFill"></image>

		<view class="form">
			<view class="title">
				<text>垃圾分类考评助手</text>
			</view>

			<view class="input-box1">
				<image class="img" src="../../static/login-user.png" mode="aspectFit"></image>
				<input type="text" v-model="form.mobile" placeholder="请输入账号" />
			</view>

			<view class="input-box2">
				<image class="img" src="../../static/login-pw.png" mode="aspectFit"></image>
				<input type="password" v-model="form.password" placeholder="请输入密码" />
			</view>

			<view class="btn" @click="submit">
				<text>登入</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: '',
				}
			};
		},
		methods: {
			async submit() {
				if (!this.form.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入账号'
					})
					return
				}

				if (!this.form.password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return
				}

				uni.showLoading({
					title: '登入中...',
					mask: true
				})

				this.$u.post('/login', this.form).then(res => {
					this.$u.vuex('vuex_user', res);
					this.$u.vuex('vuex_token', res.token);
					uni.navigateTo({
						url:'/pages/index/index'
						
					})
					
					/* uni.navigateBack({
						delta: 1
					}) */
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		image {
			width: 750rpx;
			height: 520rpx;
		}

		.form {
			position: absolute;
			top: 444rpx;
			bottom: 0;
			left: 0;
			right: 0;
			padding-top: 60rpx;
			z-index: 1;
			border-radius: 60rpx 60rpx 0 0;
			background-color: white;

			.title {
				margin-left: 50rpx;
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: 800;
				line-height: 72rpx;
				color: #333333;
			}

			.input-box {
				width: 652rpx;
				height: 84rpx;
				margin: 0 auto;
				background: #F5F5F5;
				border-radius: 54rpx;
				display: flex;
				align-items: center;


			}

			.input-box1 {
				@extend .input-box;
				margin-top: 56rpx;

				.img {
					width: 20rpx;
					height: 25rpx;
					margin-left: 34rpx;
					margin-right: 10rpx;
				}
			}

			.input-box2 {
				@extend .input-box;
				margin-top: 34rpx;

				.img {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
					margin-right: 2rpx;
				}
			}

			.btn {
				width: 652rpx;
				height: 84rpx;
				margin: 0 auto;
				margin-top: 36rpx;
				background: #3D99BB;
				border-radius: 54rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 84rpx;
				text-align: center;
				color: #FFFFFF;
				opacity: 1;
				transition: opacity 0.1s linear;

				&:active {
					opacity: 0.4;
				}
			}
		}
	}
</style>
